<template>
  <view class="list flex-direction-column">
    <view
      class="item flex"
      :style="props.border ? 'border-bottom:1px solid #eee; border-radius:0' : ''"
      v-for="item in props.list"
      :key="item.id"
      @click="tools.navTo('/pagesA/rich/mess?params=' + JSON.stringify({ type: 2, id: item.id, title: '新闻' }))"
    >
      <!-- <view class="left">
        <image mode="aspectFill" class="img" :src="item.image"></image>
      </view> -->
      <view class="right flex-direction-column">
        <view class="title two-line">{{ item.title }}</view>
        <view class="time flex">
          <image src="/static/icon/05.png"></image>
          <text>{{ item.date || item.create_time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { Tlist } from '@/typings/list'
import tools from '@/utils/tools'
const props = defineProps({
  border: {
    type: Boolean,
    default() {
      return false
    }
  },
  list: {
    type: Array as PropType<Tlist['item'][]>
  }
})
</script>

<style lang="scss" scoped>
.item {
  border-radius: 10rpx;
  padding: 22rpx 20rpx;
  background-color: #fff;
  margin: 16rpx 0 0 0;
  &:nth-child(1) {
    margin-top: 24rpx;
  }
  .left {
    width: 120rpx;
    height: 120rpx;
    image {
      border-radius: 6rpx;
    }
  }
  .right {
    flex: 1;
    // height: 120rpx;
    margin-left: 18rpx;
    justify-content: space-between;
    .title {
      font-size: 32rpx;
      line-height: 44rpx;
      margin-bottom: 4rpx;
      max-height: 84rpx;
    }
    .time {
      margin-top: 10rpx;
      image {
        width: 28rpx;
        height: 28rpx;
        margin-right: 5rpx;
        border-radius: 4rpx;
      }
      text {
        font-size: 28rpx;
        line-height: 22px;
        color: #777777;
      }
    }
  }
}
</style>
